<template>
    <div>
           <!-- 底部导航 -->
            <div class="foot">
                <!-- 发现 find -->
                <!-- <div class="foot-item"> -->
                <router-link tag="div" class="foot-item" to="/recommend">
                    <span class="iconfont icon-wangyiyunyinle" ></span>
                    <span class="te">发现</span>
                </router-link>
                <!-- 播客  podcast -->
                <!-- <div class=" foot-item" > -->
                <router-link tag="div" class="foot-item" to="/attent">
                    <span class="iconfont icon-boke"></span>
                    <span  class="te">播客</span>
                    播客
                </router-link>
                <!-- 我的 my -->
                <router-link tag="div" class="foot-item" to="/userInfo">
                    <span class="iconfont icon-yinle"></span>
                    <span  class="te">我的</span>
                </router-link>
                <!-- 关注 focus
                <div class=" foot-item">
                    <span class="iconfont icon-shuangren"></span>
                    <router-link tag="span" class="te" to="/attent">关注</router-link>
                    <span  class="te" @click="$router.push('/attent')">关注</span>
                </div> -->
                <!-- 云村 cloud  /mvlist-->
                 <router-link tag="div" class="foot-item" to="/mvlist">
                    <span class="iconfont icon-yunshujukuMemcache"></span>
                    <span class="te">MV</span>
                 </router-link>
            </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
.foot{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    box-sizing:border-box;
    // min-width: 375px;
    // max-width: 750px;
    width: 100%;
    left: 0;
    background-color: #fff;
    font-size: 12px;
    border-top: 1px solid #b1b1b1;
    color:#b1b1b1;
    height: 50px;
    position: fixed;
    //  position: fixed;
    justify-content: space-between;
    bottom: 0;
    z-index: 100;
   .foot-item{
     width: 25%;
     font-size: 18px;
     height: 40px;
     span{
      display: block;
      width: 100%;
      height: 20px;
      text-align: center;
       line-height: 20px;
       font-size: 20px;
       &.te{
          font-size: 14px;
       }
     }
      &.tcon{
        color: red;
      }
  }
}


</style>